/** MEASURE A DOM
 我们没有选择useRef，因为对象ref不会通知我们当前ref值的更改。
 使用`callback ref`可以确保即使子组件稍后显示测量的节点(例如在响应单击时)，我们仍然可以在父组件中得到关于它的通知，并且可以更新测量值。

 callback ref 长这样
 <input ref={(input:HTMLInputElement) => this.a = input}/>
*/
import React,{useState,useCallback} from 'react';
export default function useClientRect() {
  const [rect, setRect] = useState<DOMRect|null>(null);
  const ref = useCallback((node: HTMLElement) => {
    if (node !== null) {
      setRect(node.getBoundingClientRect());
    }
  }, []);
  return [rect, ref];
}

/* example
function MeasureExample() {
  const [rect, ref] = useClientRect();
  return (
    <>
      <h1 ref={ref}>Hello, world</h1>
      {rect !== null &&
        <h2>The above header is {Math.round(rect.height)}px tall</h2>
      }
    </>
  );
}
*/

//TODO 上面的示例中只会在组件挂载和卸载时,ref callback才会被调用
//  如果你想当组件resizes时也发出通知,那需要考虑集成 ResizeObserver(https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
